<template>
  <div class="homeBannerOne">
    <section class="home-banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <router-link tag="a" :to='{ path: "/ProductList", query:{ region:"banner",topicId: "e5a6b1a39a6244149d0e6ea86f4eee77"} }'>
              <img src="https://i1.ygimg.cn/pics/mobile/homepage/2020/07/1594023407908.jpg" alt />
            </router-link>
          </div>
          <div class="swiper-slide">
            <router-link tag="a" :to='{ path: "/ProductList", query:{ region:"banner",topicId: "4c22abf8b88147cba8ea17b08ed38344"} }'>
              <img src="https://i1.ygimg.cn/pics/mobile/homepage/2020/07/1594023419744.jpg" alt />
            </router-link>
          </div>
          <!-- 动态加载预留 -->
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </section>
  </div>
</template>

<script>

import Swiper from "swiper";

export default {
  name: "homeBannerOne",
  mounted() {
    new Swiper(".homeBannerOne .swiper-container", {
      loop: true,
      pagination: {
        el: ".homeBannerOne .swiper-pagination"
      },
      autoplay: true,
      observer: true,
      observeParents: true
    });
  }
};
</script>

<style scoped>
.home-banner {
  position: relative;
}

.swiper-container {
  backface-visibility: hidden;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.swiper-slide > a {
  display: block;
}

.swiper-slide > a > img {
  width: 100%;
  vertical-align: top; /*清除1PX的间距*/
}
</style>